<template>
  <n-config-provider :theme-overrides="handleTheme.theme">
    <!-- <n-button @click="theme">{{handleTheme.label}}</n-button> -->
    <n-message-provider>
      <router-view />
    </n-message-provider>
    <n-global-style />
  </n-config-provider>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { NConfigProvider, NGlobalStyle, darkTheme } from 'naive-ui'
import { BuiltInGlobalTheme } from 'naive-ui/lib/themes/interface';

/**
 * @type import('naive-ui').GlobalThemeOverrides
 */
// const themeOverrides: GlobalThemeOverrides = {
//   common: {
//     primaryColor: 'cyan',
//     baseColor: 'cyan',
//     infoColor: 'red',
//     bodyColor: '#1E1E1E',
//     textColorBase: '#FFF',
//   },
//   Button: {
//     textColor: 'white',
//   },
//   ColorPicker: {
//     textColor: 'red'
//   }
// }

interface handleThemeDto {
  label: '深色' | '浅色';
  theme: BuiltInGlobalTheme | null;
}
export default defineComponent({
  name: 'App',
  components: { NConfigProvider, NGlobalStyle },
  computed: {
    handleTheme(): handleThemeDto{
      if (!this.themeType) {
        return {
          label: '浅色',
          theme: this.darkTheme
        }
      } else {
        return {
          label: '深色',
          theme: null
        }
      }
    }
  },
  setup() {
    const themeType = ref(false);
    const theme = () => {
      themeType.value = !themeType.value
    }
    return {
      themeType,
      darkTheme,
      theme
    }
  }
})
</script>
